<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>提交作业</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" type="text/css">
</head>
<style>
    .layui-layer-dialog .layui-layer-content{
        color: black;
    }
</style>
<body style="background-color: #1E9FFF !important;">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-gray">

        <div class="layui-logo" style="font-size: 20px; color: #393D49; cursor: pointer" onclick="index()">作业查重系统学生端</div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="/student/personal" style="color: #393D49">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <span th:text="${current.realname}"></span>
                </a>
            </li>
            <li class="layui-nav-item"><a href="/logout" style="color: #393D49">退了</a></li>
        </ul>
    </div>

    <div>
        <!-- 内容主体区域 -->
        <div style="width: 80%; margin:20px auto 20px auto">
            <div class="layui-row layui-col-space5 layui-bg-gray">
                <div class="layui-col-md12">
                    <div class="layui-row grid-demo">

                        <!-- 面包屑导航 -->
                        <div class="layui-col-md12 layui-form-item" style="padding-left: 20px">
                            <span id="view" class="layui-breadcrumb" lay-filter="breaddemo">
                                <script id="bread" type="text/html">
                                    {{# layui.each(d.bread, function (i, e) { }}
                                    <a href="javascript:;" onclick="breadOn('{{e.name}}');" style="font-size: 20px">{{ e.name }}</a>
                                    <span lay-separator>/</span>
                                    {{# }); }}
                                </script>
                            </span>
                        </div>

                        <!-- 头部工具栏 -->
                        <div class="layui-btn-group demoTable">
                            <button class="layui-btn layui-btn-normal" id="uploadBtn"><i class="layui-icon"></i></button>
                        </div>

                        <!-- 数据表格 -->
                        <div class="layui-col-md12" style=" padding-left: 5px">
                            <table id="test" class="layui-table" lay-filter="test"></table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="position: relative;text-align: center;background-color: #eeeeee">
        <!-- 底部固定区域 -->
        © 2019-2020 alushu.xyz 版权所有 ICP证：<a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备20009324号</a>
    </div>
</div>


<!-- 方法 -->
<script src="../../webjars/jquery/3.4.1/jquery.js"></script>
<script src="../../layui/layui.js" type="text/javascript"></script>
<script th:inline="none">


    function index(){
        window.location="/student/index"
    }

    //layui官方方法
    layui.use(['table', 'tree', 'util', 'element', 'laytpl','upload'], function () {
        var table = layui.table
            , upload = layui.upload
            , layer = layui.layer
            , element = layui.element
            , laytpl = layui.laytpl;
        var url = '/file/show';
        //用于与后端交互，异步更新url
        var path = [];
        //面包屑导航多一个root元素以便返回根目录
        var breadArray = [];
        var j = {"name": "root"};
        breadArray.push(j);
        var breadData = {
            "bread": breadArray
        };
        var getTpl = bread.innerHTML
            , view = document.getElementById('view');


        //layui数据表格
        table.render({
            elem: '#test'
            , url: url
            ,limit:15
            ,height:'full-195'
            ,page: {
                layout: ['prev', 'page', 'next', 'skip','count']
                ,groups: 5
                ,theme:'#1E9FFF'
            }
            , cols: [[
                {field: 'name', title: '文件名', sort: true, style: 'cursor: pointer;', event: 'setSign'}
                , {field: 'date', title: '修改日期', width: 150, sort: true}
                , {field: 'size', title: '文件大小', width: 120, sort: true}
                , {field: 'type', title: '文件类型', width: 120}
            ]]
        });


        //layui表格点击文件事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'setSign') {
                if (data.type === 'file') {
                    layer.alert("暂不支持打开文件");
                } else {
                    //点击表格文件夹时，向path后放文件夹名字
                    path.push(data.name);
                    var j = {};
                    //path栈顶元素放{'name':'这里'}，然后放到breadArray中
                    j.name = path[path.length - 1];
                    breadArray.push(j);
                    breadData = {
                        "bread": breadArray
                    };
                    //layui模板引擎，此处用于把breadArray遍历成面包屑导航
                    laytpl(getTpl).render(breadData, function (html) {
                        view.innerHTML = html;
                    });
                    //layui表格重载，根据新的path
                    table.reload('test', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: { //设定异步数据接口的额外参数，任意设
                            //"path": (path.join('/') + '/').replace(/\/\//, '/')
                            "path": path.join('\\')+ '\\'
                        }
                    });
                }
            }
        });

        //监听面包屑导航点击
        window.breadOn = function (breadName) {
            //breadArray会比path多放一个root元素在开头
            breadArray = [];
            //面包屑导航默认显示root/
            var j = {"name": "root"};
            breadArray.push(j);
            //若点击root，则把path清空
            if (breadName === 'root') {
                path = [];
            } else {
                //否则i为点击的breadArray在path中的索引
                var i = path.indexOf(breadName);
                //如果点的是root后第1个，path清剩那1个，breadArray清剩root
                if (i === 0) {
                    path = [breadName];
                    j = {};
                    j.name = path[0];
                    breadArray.push(j);
                } else {
                    //否则裁剪数组path，[0,i+1)；breadArray
                    path = path.slice(0, i + 1);
                    for (var x = 0; x < i + 1; x++) {
                        j = {};
                        j.name = path[x];
                        breadArray.push(j);
                    }
                }
            }
            breadData = {
                "bread": breadArray
            };
            laytpl(getTpl).render(breadData, function (html) {
                view.innerHTML = html;
            });

            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: { //设定异步数据接口的额外参数，任意设
                    "path": path.join('\\')+ '\\'
                    //"path": (path.join('/') + '/' ).replace(/\/\//, '/')
                }
            });
        };

        //拖拽上传
        upload.render({
            elem: '#uploadBtn'
            ,url: '/file/uploadFile'
            ,method:'post'
            ,done: function(res){
                if(res.code === 0 || res.code === 1 || res.code === -1 || res.code === 2){
                    alert(res.msg);
                } else {
                    alert("未知错误，请联系管理员")
                }
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: { //设定异步数据接口的额外参数，任意设
                        //"path": (path.join('/') + '/').replace(/\/\//, '/')
                        "path": path.join('\\')+ '\\'
                    }
                });
            }
            ,data:{//上传文件到当前文件夹附带path
                "path":function () {
                    return path.join('\\')+ '\\'
                }
            }
            ,accept: 'file'
            ,multiple:'true'
            ,size: 10240
        });


        //初始化面包屑导航
        laytpl(getTpl).render(breadData, function (html) {
            view.innerHTML = html;
        });


        /*//layui自定义按钮事件监听，按钮须有data-type属性
        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('test')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('test')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('test');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });*/

    });


</script>
</body>
</html>
